<template>
  <div class="today-flight-record">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">今日飞行记录</h3>
    </div>
    <!-- 内容 -->
    <div class="panel-content">
      <el-table
        :data="tableData"
        class="flight-table"
        :header-cell-style="headerCellStyle"
        :row-class-name="tableRowClassName"
        :height="tableHeight"
        fit
      >
        <el-table-column prop="no" label="序号" :min-width="columnWidths.no" />
        <el-table-column prop="taskName" label="任务名称" :min-width="columnWidths.taskName" />
        <el-table-column prop="route" label="执行航线" :min-width="columnWidths.route" />
        <el-table-column prop="time" label="执行时间" :min-width="columnWidths.time" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 响应式视口宽度
const viewportWidth = ref(window.innerWidth)

// 监听窗口大小变化
const handleResize = () => {
  viewportWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// px转vw计算函数
const px2vw = (px) => {
  return (px / 1920) * viewportWidth.value
}

// 计算表格高度（相对于1920宽度的视口）
const tableHeight = computed(() => {
  return px2vw(180)
})

// 计算列宽
const columnWidths = computed(() => ({
  no: px2vw(45),
  taskName: px2vw(90),
  route: px2vw(90),
  time: px2vw(90)
}))

// 模拟数据
const tableData = ref([
  {
    no: '01',
    taskName: '此处为文字占位',
    route: '此处为文字占位',
    time: '2025-04-15 16:43:17'
  },
  {
    no: '02',
    taskName: '此处为文字占位折行显示',
    route: '此处为文字占位折行显示',
    time: '2025-04-15 16:43:17'
  },
  {
    no: '03',
    taskName: '此处为文字占位折行显示',
    route: '此处为文字占位折行显示',
    time: '2025-04-15 16:43:17'
  }
])

// 表头样式
const headerCellStyle = () => {
  return {
    background: 'transparent',
    color: 'rgba(175, 215, 230, 1)',
    fontSize: '0.833vw',  // 16px / 1920 * 100
    fontWeight: '500',
    letterSpacing: '0px',
    lineHeight: '0.833vw',
    border: 'none',
    padding: '0',
    height: '1.615vw'  // 31px / 1920 * 100
  }
}

// 行样式类名
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
}
</script>

<style lang="scss" scoped>
@import '@/style/utils.scss';

.today-flight-record {
  width: 404px;
  height: 258px;
  background: url('@/assets/images/dashboard_normal_model_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 16px 10px;
    box-sizing: border-box;
    position: relative;
    
    :deep(.flight-table) {
      width: 100%;
      max-height: px2vw(180);
      background: transparent;
      
      .el-table__header-wrapper {
        .el-table__header {
          tr {
            background: linear-gradient(90deg, rgba(5, 140, 187, 0.28) 0%, rgba(5, 173, 187, 0.08) 100%);
            height: px2vw(31);
          }
          
          th {
            background: transparent !important;
            height: px2vw(31);
            padding: 0;
            
            .cell {
              white-space: nowrap;
              padding: 0 px2vw(10);
              height: px2vw(31);
              line-height: px2vw(31);
              font-size: px2vw(16) !important;
            }
          }
        }
      }
      
      .el-table__body-wrapper {
        .el-table__body {
          border-spacing: 0 4px;
          
          tr {            
            &.odd-row {
              background: linear-gradient(90deg, rgba(5, 140, 187, 0.25) 0%, rgba(5, 173, 187, 0.07) 100%);
            }
            
            &.even-row {
              background: linear-gradient(90deg, rgba(5, 140, 187, 0.11) 0%, rgba(5, 173, 187, 0.03) 100%);
            }
            
            td {
              border: none;
              background: transparent;
              color: #FFFFFF;
              font-size: px2vw(12);
              padding: px2vw(8) 0;
              
              &:first-child {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
              }
              
              &:last-child {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
              }
              
              .cell {
                white-space: pre-line;
                line-height: 1.4;
                padding: 0 px2vw(10);
              }
            }
          }
        }
      }
      
      &::before,
      &::after {
        display: none;
      }
      
      .el-table__inner-wrapper::before {
        display: none;
      }
      
      
      // 自定义滚动条样式
      .el-table__body-wrapper {
        // 始终显示滚动条，避免内容跳动
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        
        &::-webkit-scrollbar {
          width: px2vw(3);
          height: px2vw(3);
        }
        
        &::-webkit-scrollbar:horizontal {
          display: none;
        }
        
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        
        &::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.3);
          border-radius: px2vw(4);
          // 添加边框让滚动条不会完全贴边
          // border: px2vw(2) solid transparent;
          // background-clip: padding-box;
          
          &:hover {
            background: rgba(255, 255, 255, 0.5);
            background-clip: padding-box;
          }
        }
        
        &::-webkit-scrollbar-corner {
          background: transparent;
        }
      }
      
      // 为了兼容不支持 overlay 的浏览器，添加备选方案
      @supports not (overflow: overlay) {
        .el-table__body-wrapper {
          // 在不支持 overlay 的浏览器中，至少让滚动条更细
          &::-webkit-scrollbar {
            width: px2vw(3);
            height: px2vw(3);
          }
        }
      }
    }
  }
}
</style>